<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
	<th:block th:include="include :: header('主题编辑')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: oly_markdown_css" />
	<th:block th:include="include :: ztree-css" />
</head>

<body class="gray-bg">
	<div class="ui-layout-west">
		<div class="box box-main">
			<div class="box-header">
				<div class="box-title">
					<i class="fa icon-grid"></i> 主题树
				</div>
				<div class="box-tools pull-right">
					<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
							class="fa fa-chevron-up"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
							class="fa fa-chevron-down"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新树"><i
							class="fa fa-refresh"></i></button>
					<button shiro:hasPermission="cms:theme:addFile" type="button" class="btn btn-box-tool" id="btnAddFile" title="新建文件"><i
							class="fa fa-file-code-o" aria-hidden="true"></i></button>
					<button shiro:hasPermission="cms:theme:deleteFile" type="button" class="btn btn-box-tool" id="btnDeleteFile" title="删除文件"><i
						    class="fa fa-trash-o" aria-hidden="true"></i></button>
				</div>
			</div>
			<div class="ui-layout-content">
				<div id="tree" class="ztree"></div>
			</div>
		</div>
	</div>

	<div class="ui-layout-center">
		<div class="container-div">
			<div class="row">
				<div class="col-sm-12">
					<div class="btn-group" style="position: relative; z-index: 1000;top:5px;right:20px;">
						<a class="btn btn-white btn-bitbucket" id="fullscreen-btn" style="background-color: #3535356b;">
							<i class="fa fa-arrows-alt" style="color: white"></i>
						</a>
						<a class="btn btn-white btn-bitbucket" id="save" style="background-color: #3535356b;">
							<i class="fa fa-floppy-o" style="color: white"></i>
						</a>
					</div>
					<div id="temCode">
						<textarea style="display:none;"></textarea>
					</div>
				</div>
			</div>
		</div>
		<div style="display: none;" id="addFileTemplate">
			<div class="form-horizontal"> <div class="form-group">
				<label class="col-sm-4 control-label">文件名称</label>
				<div class="col-sm-8">
					<input type="text" id="fileName" class="form-control"/>
				</div>
			</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">文件类型</label>
					<div class="col-sm-8">
						<select id="filePrefix" class="form-control" >
							<option  th:each="opt:${supportTypes}" th:value="${opt}" th:text="${opt}"></option>
							</select>
					</div>
				</div>
			</div>

		</div>
		<th:block th:include="include :: footer" />
		<th:block th:include="include :: layout-latest-js" />
		<th:block th:include="include :: ztree-js" />
		<th:block th:include="include :: oly_markdown_js" />
		<script th:inline="javascript">
			var editFlag = [[${@permission.hasPermi('oly:theme:edit') }]];
			var removeFlag = [[${@permission.hasPermi('oly:theme:remove') }]];
			var prefix = ctx + "cms/theme";
			//编辑的文件路径
			var editPath, folderPath;
			var codeEditor = editormd("temCode", {
				width: "100%",
				height: 720,
				watch: false,
				toolbar: false,
				codeFold: true,
				searchReplace: true,
				placeholder: "Enjoy coding!",
				value: '',
				theme: "dark",
				mode: "text/html",
				path: '/ajax/libs/oly_markdown/lib/',
				onfullscreen: function () {
					$('.ui-layout-resizer').hide();
				},
				onfullscreenExit: function () {
					$('.ui-layout-resizer').show();

				}
			});
			$("#fullscreen-btn").bind("click", function () {
				codeEditor.fullscreen();
			});
			$(function () {
				var panehHidden = false;
				if ($(this).width() < 769) {
					panehHidden = true;
				}
				$('body').layout({ initClosed: panehHidden, west__size: 185 });
				queryDeptTree();
			});

			function queryDeptTree() {
				var url = prefix + "/treeData";
				var options = {
					url: url,
					expandLevel: 0,
					onClick: zOnClick
				};
				$.tree.init(options);
				function zOnClick(event, treeId, treeNode) {
					if (!treeNode.parent) {
						$.get(prefix + "/themeContent", { path: treeNode.id }, function (result) {
							codeEditor.setValue(result.msg);
							editPath = treeNode.id;
							folderPath = null;
						});
					}
					else {
						folderPath = treeNode.id;
						editPath = null;
					}
				}
			}

			$('#btnExpand').click(function () {
				$._tree.expandAll(true);
				$(this).hide();
				$('#btnCollapse').show();
			});

			$('#btnCollapse').click(function () {
				$._tree.expandAll(false);
				$(this).hide();
				$('#btnExpand').show();
			});

			$('#btnRefresh').click(function () {
				queryDeptTree();
			});

			$('#btnAddFile').click(function () {
				if (folderPath != null) {
					layer.confirm($("#addFileTemplate").html(), { title: '新建文件' }, function (index) {
						let fileName = $.trim($("#fileName").val());
						let filePrefix = ($("#filePrefix").val());
						if (fileName.length > 0) {
							$.post(prefix + "/addFile", { fileName: fileName, filePrefix: filePrefix, path: folderPath }, function (result) {
								if (result.code == 0) {
									layer.msg('添加成功', { icon: 6 });
									queryDeptTree();
									layer.close(index);
								}
								else {
									layer.msg(result.msg, { icon: 6 });
								}
							});
						}
					});
				}
				else {
					layer.msg('请选择上级文件夹', { icon: 6 });
				}
			});

			$('#btnDeleteFile').click(function () {
				if (editPath != null) {
					$.post(prefix + "/deleteFile", { path: editPath }, function (result) {
						if (result.code == 0) {
							layer.msg('删除成功', { icon: 6 });
							queryDeptTree();
							editPath = null;
							codeEditor.setValue('');
						}
						else {
							layer.msg(result.msg, { icon: 6 });
						}
					});
				}
			});
			/*保存*/
			$("#save").click(function () {
				if (editPath == null) {
					$.modal.alertError("你还没有选择任何文件编辑!");
				}
				else {
					$.operate.saveTab(prefix + "/themeContentSave", {
						"path": editPath,
						content: codeEditor.getValue()
					});
				}
			})
		</script>
</body>

</html>